<!-- 菜单列表中的编辑按钮 -->
<template>
  <div class="breadcrumb-style">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/ums/admin' }">权限</el-breadcrumb-item>
      <el-breadcrumb-item>添加菜单</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="box">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item class="box1" label="菜单名称:" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item class="box1" label="上级菜单:" prop="region">
        <el-select v-model="ruleForm.parentId" placeholder="无上下级菜单">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="box1" label="前端名称:" prop="date1">
        <el-input v-model="ruleForm.title" style="background-color: rgb(245, 247, 250)" />
      </el-form-item>
      <el-form-item class="box1" label="前端图标:" prop="date2">
        <el-input v-model="ruleForm.icon" style="background-color: rgb(245, 247, 250)" />
      </el-form-item>
      <el-form-item class="box1" label="是否显示:" prop="resource">
        <el-radio-group v-model="ruleForm.hidden">
          <el-radio class="box1" :label="1">是</el-radio>
          <el-radio class="box1" :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="box1" label="排序:" prop="sort">
        <el-input v-model="ruleForm.sort" />
      </el-form-item>
      <el-form-item>
        <el-button class="box1" type="primary" @click="onConfirm"> 提交 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, Ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { resource } from "../../request/api";
import { IAdminListItem } from "@/request/QmsAdminConreiller";
import { useRoute } from "vue-router";
const route = useRoute();
const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
  name: "",
  parentId: 0,
  hidden: 0,
  icon: "",
  title: "",
  sort: 0,
});
let options = ref([]);
let add = 0;

// 渲染上下级菜单
resource.AllocMenu().then((res) => {
  // console.log(res);
  let option = res.filter((res) => {
    return res.parentId == 0;
  });
  let option2 = option.map((el) => {
    return {
      value: el.id,
      label: el.title,
    };
  });
  options.value = option2;
});

let id = route.query.id;
// console.log(id);
if (route.query.id) {
  resource.Addmenu(id).then((res) => {
    // console.log(res);
    ruleForm.value = res;
    return;
  });
}

let emits = defineEmits(["bianji2", "confirm"]);
let originForm = ref({}) as Ref<IAdminListItem>; // 相当于一个空的备份
let ownForm = ref({}) as Ref<IAdminListItem>;
// 确定
let onConfirm = () => {
  if (route.query.id) {
    resource.SubmitMenu(ruleForm.value);
  } else {
    resource.Changemenu(ruleForm.value);
  }
};
</script>
<style lang="scss" scoped>
.breadcrumb-style {
  width: 100%;
  height: 30px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.box {
  width: 95%;
  height: 450px;
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #ebeef5;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.box1 {
  margin: 20px;
}
</style>
